<template>
  <div class="user-container">
    <div class="custom-contents">
      <div class="head">
        <div class="hello">HELLO</div>
        <div class="hello-text">欢迎参与比赛</div>
        <div class="openhead" v-if="!userInfo">
          <img class="headimg" :src="`./source/img/${sex == 1?'ns_head':'nvs_head'}.png`" />
          <div class="user-namse">微信用户</div>
        </div>
        <div class="openhead" v-if="userInfo">
          <img class="headimg" :src="userInfo.avatarUrl" />
          <div class="user-namse">{{userInfo.nickname || userInfo.wechat_nickname}}</div>
        </div>
      </div>
    </div>
    <div class="cell-group">
      <div class="cell-box">
        <van-cell icon="contact-o" title="个人信息" is-link @click="hrefMethod('userinfo')" />
        <van-cell icon="coupon-o" title="实名制管理" is-link @click="hrefMethod('recognitionList')" />
        <van-cell icon="orders-o" :title="userRole == 1?'我的报名':'报名列表'" is-link  @click="hrefMethod('signUp')" />
        <van-cell icon="guide-o" title="排行版" is-link @click="hrefMethod('rank')" />
        <van-cell icon="medal-o" title="我的证书" v-if="userRole==1" is-link @click="hrefMethod('certificate')" />
      </div>
    </div>
  </div>
</template>

<script>
import { Cell, CellGroup } from 'vant';
import { getUserStatus,getUserRole} from "@/utils/utils";
export default {
  components: {
    [Cell.name]: Cell, [CellGroup.name]: CellGroup
  },
  data: function () {
    return {
      userRole: getUserRole(),
      name: '',
      sex: 1,
      userInfo:null
    };
  },
  mounted() {
    this.getUserInfo()
  },
  methods: {
    hrefMethod(path){
      if(getUserStatus() == 1){
        this.$router.push({path:'/'+path})
      }else{
        this.$dialog.confirm({
          title: '提示',
          message: '您还未登录，是否前往登录',
        }).then(() => {
          sessionStorage.setItem('YF_LOGIN_HREF',window.location.href);
          this.$router.push({ path: '/login' });
        }).catch(() => { });
      }
    },
    getUserInfo(){
      let userInfo=null;
      try{
        userInfo=localStorage.getItem('YF_USER_INFOS')
        userInfo=userInfo && JSON.parse(userInfo)?JSON.parse(userInfo):null
      }catch(e){console.log(e)}
      this.userInfo=userInfo;
    },
  },
};
</script>

<style lang="less">
.user-container {
  .custom-contents {
    padding: 0.3rem;
  }
  .head {
    padding: 0.3rem;
    background: url('../../assets/header.png') center no-repeat;
    background-size:100% 100%;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
    position: relative;
  }
  .hello {
    font-size: 0.3rem;
    color: #fff;
    font-weight: bold;
  }
  .hello-text {
    font-size: 0.3rem;
    color: #fff;
    font-weight: bold;
    padding-top: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .openhead {
    align-items: center;
    display: flex;
    padding: 0.6rem 0;
  }
  .headimg {
    border-radius: 50%;
    display: block;
    float: left;
    overflow: hidden;
    width: 1.2rem;
    height: 1.2rem;
  }
  .user-namse {
    font-size: 0.28rem;
    color: #fff;
    padding-left:0.1rem;
    white-space: nowrap;
  }
  .cell-group {
    padding: 0.2rem 0.3rem;
  }
  .cell-box {
    padding: 0.3rem 0;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
    position: relative;
  }
}
</style>